<template>
	<view>
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="搜索页" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<view class="searchBox">
			<u-search placeholder="请输入关键字" @change="getSearch" :showAction="false" v-model="keyword"></u-search>
		</view>
		<view class="spList">
			<view class="spListCon" v-for="v in searchArr" :key="v.id" @click="goDetails(v.id)">
				<view class="image">
					<image :src="v.img"></image>
				</view>
				<view class="right">
					<view class="">{{v.goodsname}}</view>
					<view class="price">
						<text>￥{{v.price}}</text>
						<text>￥{{v.market_price}}</text>
					</view>
					<u-tag style="width: 160rpx;" text="双11.11限制" type="error" size="mini"></u-tag>
					<view class="evaluate">
						<text space="emsp">4490评论 99%好评</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="!searchArr" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightClick() {
					console.log('rightClick');
				},
				leftClick() {
					console.log('leftClick');
				},
				keyword: '',
				searchArr: null
			}
		},
		methods: {
			// 搜索
			getSearch(e) {
				// console.log(e);
				// return
				this.$http({
					url: '/api/search',
					data: {
						keywords: e
					}
				}).then((res) => {
					// console.log(res);
					this.searchArr = res.data.list;
					!this.searchArr ? '' : this.searchArr.map(item => item.img = this.$baseUrl + item.img)
				})
			},
			// 跳转商品详情页
			goDetails(id) {
				// console.log(id);
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style scoped>
	.searchBox {
		background-color: #ff6040;
		line-height: 120rpx;
		padding: 0 30rpx 0 30rpx;
	}

	/* 商品样式 */
	.spList {
		padding: 20rpx;
	}

	/* 商品列表 */
	.spListCon {
		display: flex;
		border-bottom: 1rpx solid #ccc;
		margin-bottom: 20rpx;
	}

	.spListCon .image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.spListCon .image image {
		width: 200rpx;
		height: 200rpx;
	}

	.spListCon .right {
		flex: 1;
		font-size: 28rpx;
	}

	.right .price,
	.right .evaluate {
		line-height: 60rpx;
		color: #ccc;
	}

	.price text:nth-child(2) {
		text-decoration: line-through
	}

	.price text:nth-child(1) {
		font-size: 30rpx;
		color: red;
	}
</style>